<template>
	<div class="login_div">
		<div class="login">
			<div class="login-title">赛期二资管系统</div>
			<div class="login_center">
				<!-- <div style="font-size: 24px;text-align: center;margin-top: 10px;">{{$t("m.PackageName")}}</div> -->
				<div class="login-title">赛期二资管系统</div>
				<div class="login-box">
                    <div class="login_input">
						<span style="color: #fff;">{{$t("m.Account")}}</span>
						<input type="num" v-model="param.username" :placeholder='$t("m.AccountTips")' />
					</div>
					<div class="login_input">
						<span style="color: #fff;">{{$t("m.Password")}}</span>
						<input type="password" v-model="param.password" :placeholder="$t('m.PasswordTips')" />
					</div>
					<div class="item" style="display: flex;flex-direction: row;align-items: center;">
						<div>
							<input type="checkbox" v-model="remember" />
							<label>{{$t('m.RememberAccount')}}</label>
						</div>
						<!-- <div style="margin-left: 130px;">
							<div @click="toggleLang('zh')" :disabled="$i18n.locale == 'zh'" v-show="$i18n.locale == 'en'" class="langBtn">中文</div>
							<div @click="toggleLang('en')" :disabled="$i18n.locale == 'en'" v-show="$i18n.locale == 'zh'" class="langBtn">English</div>
						</div> -->
					</div>
					
					
					<div class="login_button" @click="loginbtn && login()"><button>{{$t("m.NowLogin")}}</button></div>
					<!-- <div class="zhuc" @click="loginbtn && registon()">立即开户</div> -->
				</div>
				
			</div>
		</div>
		<div class="looding" v-if="!loginbtn">{{$t('m.LoginTips1')}}</div>
		<div class="looding2" v-if="!loginbtn2">{{$t('m.LoginTips2')}}</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: mapState({
			loginbrn: state => state.loginbrn /* 推送数据 */
		}),
		watch: {
			loginbrn(val) {
				if (val == false) {
					this.loginbtn2 = false;
					// this.$message.error('站点已关闭！');
				} else {
					this.loginbtn2 = true;
				}
			}
		},
		created() {
			/* localStorage 方法 */
			this.getlocalStorage()
			/* cookie 方法 */
			// 在页面加载时从cookie获取登录信息
			// let account = this.getCookie('account');
			// let password = Base64.decode(this.getCookie('password'));
			// 如果存在赋值给表单，并且将记住密码勾选
			// if (account) {
			//   this.remember = true;
			//   this.param.username = account;
			// }
		},
		data() {
			return {
				loginbtn: true,
				loginbtn2: true,
				param: {
					username: '',
					password: '',
					group: 'pc'
				},
				remember: true
			};
		},
		mounted() {},
		methods: {
			//切换
			toggleLang(lang) {
			      if(lang == 'zh'){
			        localStorage.setItem('locale', 'zh')
			        this.$i18n.locale = localStorage.getItem('locale')
			        this.$message({
			          message: '切换为中文！',
			          type: 'success'
			        })
			      } else if (lang == 'en') {
						localStorage.setItem('locale', 'en')
						this.$i18n.locale = localStorage.getItem('locale')
						this.$message({
						  message: 'Switch to English!',
						  type: 'success'
					  })
				  }
			},
			//登录
			login() {
				this.loginbtn = false;
				if (this.param.username == '') {
					this.loginbtn = true;
					return this.$notify.error(this.$t("m.AccountTips"));
				}
				if (this.param.password == '') {
					this.loginbtn = true;
					return this.$notify.error(this.$t("m.PasswordTips"));
				}
				this.$post('v1/site/login-name', this.param).then(res => {
					// console.log(res);
					this.loginbtn = true;
					if (res.code == 200 && res.data.access_token) {
						localStorage.removeItem('_token');
						this.$svcInvoke.setConf('_token', res.data.access_token);
						localStorage.setItem('_token', res.data.access_token);
						this.$store.commit('set', {
							userInfo: res.data.member
						});
						this.param.password = '';
						this.$notify.success(this.$t("m.Loginsuccess"));
						this.$router.push({
							path: 'home'
						});
						/* localStorage 方法 */
						if (this.remember == true) {
							this.setlocalStorage(this.param.username);
						} else {
							// this.clearlocalStorage()
						}
						/* cookie 方法 */
						// this.setUserInfo();
					} else {
						this.$notify.error(res.message || this.$t("m.Loginerror"));
					}
				});
			},
			registon() {
				this.$router.push({
					path: 'registers'
				});
			},
			/* localStorage 方法 */
			//像localStorage里存入从页面获取的用户名和密码；
			setlocalStorage(c_name) {
				localStorage.siteName = c_name;
				// localStorage.sitePassword = c_pwd
			},
			getlocalStorage: function() {
				// this.param.username = localStorage.getItem('siteName') //保存到保存数据的地方
				let account = localStorage.getItem('siteName');
				if (account) {
					this.remember = true;
					this.param.username = account;
				}
			}
			// 储存表单信息
			// setUserInfo: function() {
			//   // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
			//   // 如果没有勾选，储存的信息为空
			//   if (this.remember) {
			//     this.setCookie('account', this.param.username);
			//     // base64加密密码
			//     // let passWord = Base64.encode(this.param.password);
			//     this.setCookie('remember', this.remember);
			//   } else {
			//     this.setCookie('account', '');
			//     // this.setCookie('password', '');
			//   }
			// },
			// 获取cookie
			// getCookie: function(key) {
			//   if (document.cookie.length > 0) {
			//     var start = document.cookie.indexOf(key + '=');
			//     if (start !== -1) {
			//       start = start + key.length + 1;
			//       var end = document.cookie.indexOf(';', start);
			//       if (end === -1) end = document.cookie.length;
			//       return unescape(document.cookie.substring(start, end));
			//     }
			//   }
			//   return '';
			// },
			// 保存cookie
			// setCookie: function(cName, value, expiredays) {
			//   var exdate = new Date();
			//   exdate.setDate(exdate.getDate() + expiredays);
			//   document.cookie = cName + '=' + decodeURIComponent(value) + (expiredays == null ? '' : ';expires=' + exdate.toGMTString());
			// }
		}
	};
</script>

<style scoped>
.login-box{
	background: rgba(255, 255, 255, 0.5);
	border-radius: 15px;
	padding-bottom: 60px;
}
.login-title{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 24px;
	margin-top: 10px;
}
	.login_div {
		width: 100%;
		height: 100%;
	}

	.looding {
		position: fixed;
		top: 300px;
		left: 50%;
		border-radius: 5px;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 30px;
		font-weight: 600;
		padding: 10px;
	}
	.langBtn{
		background: dodgerblue;
		padding: 2px 10px;
	}
	.looding2 {
		position: fixed;
		top: 0rem;
		left: 0rem;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 30px;
		width: 100%;
		height: 100vh;
		line-height: 100vh;
		text-align: center;
	}

	.login {
		width: 100%;
		height: 100%;
		background: #666;
		background-image: url(../assets/logo_bg.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		border-radius: 5px;
		box-shadow: 12px 12px 12px #535353;
	}

	.login_info {
		position: fixed;
		top: 25%;
		left: 120px;
		color: #fff;
		font-size: 30px;
		font-weight: 600;
	}

	.login_center {
		width: 480px;
		height: 350px;
		
		/* opacity: 0.9; */
		position: fixed;
		top: 25%;
		left:calc(50% - 240px);
		border-radius: 5px;
		color: #fff;
	}

	.login_center>p {
		font-size: 16px;
		padding-top: 15px;
		text-align: center;
	}

	.login_input {
		width: 100%;
		height: 64px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 15px 0;
	}

	.login_input>span {
		font-size: 1.2rem;
		color: #333;
	}

	.login_input>input {
		width: 50%;
		height: 2rem;
		padding: 0 8px;
		box-sizing: border-box;
	}

	.item {
		width: 100%;
		height: 34px;
		box-sizing: border-box;
		padding-left: 100px;
	}

	.login_button {
		width: 100%;
		height: 48px;
		/* background: red; */
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
	}

	.login_button>button {
		width: 9rem;
		height: 48px;
		letter-spacing: 1px;
		line-height: 32px;
		background: #6e9bcc;
		border-radius: 3px;
		background-image: linear-gradient(to bottom, #ff003b, #f1514aed, #dc1111);
		color: #fff;
		font-size: 1rem;
		font-weight: 600;
		border: none;
	}

	.zhuc {
		cursor: pointer;
		margin-top: 10px;
		font-size: 14px;
		color: #ffffff;
		display: flex;
		justify-content: flex-end;
		padding-right: 48px;
		box-sizing: border-box;
		font-weight: 600;
	}
</style>
